<template>
  <view class="my-table">
    <view class="table-box" style="overflow: auto">
      <!-- 表头行 -->
      <view class="tr">
        <view
          class="th"
          v-for="item in columns"
          :key="item.key"
          :style="{ 'min-width': item.width + 'px' }"
          >{{ item.title }}</view
        >
      </view>
      <!-- 表格数据行 -->
      <view class="tr" v-for="(item,index) in dataSource" :key="item.id">
        <view
          class="td"
          v-for="item2 in columns"
          :key="item2.key"
          :style="{ 'min-width': item2.width + 'px' }"
          >
		  <template v-if="!item2.slot">
			  {{ item[item2.key] }}
		  </template>
		  <!-- <slot v-else :name="item.slot" :row="item" :index="index"></slot> -->
		  <slot v-else :name="item2.slot" :row="item" :index="index">{{item}}</slot>
		  </view
        >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    columns: Array,
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.table-box {
  .tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .th,
    .td {
      font-size: 14px;
      flex: 1;
      min-width: 150px;
      text-align: center;
      border-right: 1px solid #e0e0e0;
      height: 60rpx;
      line-height: 60rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      border-bottom: 1px solid #e0e0e0;
      &:first-child {
        border-left: 1px solid #e0e0e0;
      }
    }
    .th {
      border-top: 1px solid #e0e0e0;
    }
  }
}
</style>
